<template>
    <el-drawer id="elDrawer" ref="drawerRef" v-model="visible" class="parent rounded-lt-8px rounded-lb-8px" :with-header="false" v-bind="$attrs" :append-to-body="true">
        <template #default>
            <div class="">
                <div @click="onClose" class="bg-primary pointer fixed top-28px text-white w-28px text-center py-6px rounded-tl-6px rounded-bl-6px" :style="{right: size}">
                    <div>关闭</div>
                    <div class="w-10px h-10px rounded-full bg-white flex justify-center items-center ml-8px mt-5px">
                        <el-icon color="#0256FF" size="10px">
                            <Right />
                        </el-icon>
                    </div>
                </div>
                <slot></slot>
            </div>
        </template>
        <template #footer>
            <slot name="footer"></slot>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

const drawerRef = ref()
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
})

const emits = defineEmits(['update:show'])

const visible = ref(false)
const size = ref('')

const onClose = () => {
    visible.value = false
}

onMounted(() => {
    const drawer = document.querySelector('#elDrawer') as HTMLElement
    if(drawer) {
        size.value = drawer?.style.width
    }
})

watch(() => props.show, (val) => {
    visible.value = val
})

watch(visible, (val) => {
    emits('update:show', val)
})

</script>
<style lang="scss" scoped>
:deep(.el-drawer) {
    border: 12px 0 0 12px;
}
</style>
